<template>
  <el-row :gutter="15">
    <el-col :span="24" class="col-xs-12">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col" :model="search">
          <el-row :gutter="15" style="position:relative;">
            <el-col :lg="4" :md="6">
              <el-form-item prop="complainNo">
                <el-input v-model="search.complainNo" placeholder="投诉流水" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderNo">
                <el-input v-model="search.orderNo" placeholder="订单号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="workerName">
                <el-input v-model="search.workerName" placeholder="服务师傅" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-lg-only hidden-xl-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="workerPhone">
                <el-input v-model="search.workerPhone" placeholder="师傅电话" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="orderState">
                <el-select v-model="search.orderState" clearable placeholder="订单状态">
                  <el-option
                    v-for="item in orderStatusArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6" class="hidden-md-only hidden-sm-only">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="8">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
                  </el-col>
                  <el-col :span="8">
                    <el-button @click="resetFields" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="serviceNo">
                <el-select v-model="search.serviceNo" clearable placeholder="服务类型">
                  <el-option
                    v-for="item in serviceArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="complainCauseCode">
                <el-select v-model="search.complainCauseCode" clearable placeholder="投诉原因">
                  <el-option
                    v-for="item in complainCause"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="complainStartTime">
                <el-date-picker
                  v-model="search.complainStartTime"
                  type="date"
                  placeholder="投诉开始日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="complainEndTime">
                <el-date-picker
                  v-model="search.complainEndTime"
                  type="date"
                  placeholder="投诉结束日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="colorFlag">
                <el-select v-model="search.colorFlag" clearable placeholder="订单标记">
                  <el-option
                    v-for="item in colorArr"
                    :key="item.value"
                    :label="item.text"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-fahuobao-order/fhbComplain/findComplainRecordList"
        :columns="columns"
        :tabs="tabs"
        :initParams="{
          isMerchant: 1
        }"
      >
        <template slot="preColumn">
          <el-table-column prop="orderNo" fixed="left" width="170px" align="center" label="订单号">
            <template slot-scope="scope">
              <a href="javascript:;" class="blue-color" @click="show(scope.row)">{{ scope.row.orderNo }}</a>
            </template>
          </el-table-column>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="80px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click.prevent="show(scope.row, 1)">{{ status == 1 ? '查看' : '处理' }}</el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {unixTimestampFilter, filterDataBaseDictionary, isTrue} from '@/filters'
import {copy} from '@/utils'
import {
  getFhbServiceType,
  getSubDictListOfParentCode,
  getCOMPLAINCAUSE,
  getFhbComplainNature
} from '@/utils/selectOptions'

export default {
  name: 'fhbComplaintIndex',
  data() {
    let baseColumns = [
      {
        label: '投诉流水',
        data: 'complainNo',
        width: '140px'
      },
      {
        label: '服务类型',
        data: 'service'
      },
      {
        label: '订单状态',
        data: 'orderState',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '投诉原因',
        data: 'complainCause',
        render(data, type, full, meta) {
          return filterDataBaseDictionary(data)
        }
      },
      {
        label: '服务师傅',
        data: 'workerName'
      },
      {
        label: '师傅电话',
        data: 'workerPhone'
      },
      {
        label: '实付金额',
        data: 'orderMoney'
      },
      {
        label: '投诉时间',
        data: 'foundtime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        },
        width: '140px'
      }
    ]
    let passColumns = copy(baseColumns, true)
    passColumns.splice(passColumns.length, 0,
      {
        label: '是否属实',
        data: 'boolReal',
        render(data, type, full, meta) {
          return isTrue(data)
        }
      },
      {
        label: '处理措施',
        data: 'dealWithType'
      },
      {
        label: '处理人',
        data: 'conductorName'
      },
      {
        label: '处理时间',
        data: 'conductTime',
        render(data, type, full, meta) {
          return unixTimestampFilter(data)
        },
        width: '140px'
      }
    )
    return {
      status: 0,
      searchLoading: false,
      isOpen: false,
      search: {
        complainNo: '',
        orderNo: '',
        workerName: '',
        workerPhone: '',
        orderState: '',
        serviceNo: '',
        complainCauseCode: '',
        complainStartTime: '',
        complainEndTime: ''
      },
      colorArr: [
        {text: '红色', value: 'red'},
        {text: '橙色', value: 'orange'},
        {text: '黄色', value: 'yellow'},
        {text: '绿色', value: 'green'},
        {text: '蓝色', value: 'blue'}
      ],
      serviceArr: [],
      orderStatusArr: [],
      complainCause: [], // 投诉原因
      fhbComplainNature: [], // 投诉性质
      columns: baseColumns,
      tabs: [
        {
          label: '待反馈',
          callback: (params) => {
            this.status = 0
            params.conductorName = ''
            params.resultStartTime = ''
            params.resultEndTime = ''
            params.complainStatus = 0
          }
        },
        {
          label: '已反馈',
          columns: passColumns,
          callback: (params) => {
            this.status = 1
            params.complainStatus = 1
          }
        }
      ]
    }
  },
  created() {
    getFhbServiceType().then(arr => {
      if (Array.isArray(arr)) {
        this.serviceArr = arr
      }
    })
    getSubDictListOfParentCode('FHBSTATE').then(arr => {
      if (Array.isArray(arr)) {
        this.orderStatusArr = arr
      }
    })
    getCOMPLAINCAUSE().then(arr => {
      if (Array.isArray(arr)) {
        this.complainCause = arr
      }
    })
    getFhbComplainNature().then(arr => {
      if (Array.isArray(arr)) {
        this.fhbComplainNature = arr
      }
    })
  },
  methods: {
    searchFunc(search) {
      let data = copy(search, true)
      this.searchLoading = true
      this.$refs.BasicTable.search(data).finally(_ => {
        this.searchLoading = false
      })
    },
    // 跳转详情
    show(data, tab = 3) {
      this.$router.push({
        path: '/ss-fhb/complaint/show/' + data.id,
        query: {tab, status: this.status, orderId: data.orderId}
      })
    },
    resetFields() {
      const node = this.$refs.searchForm
      if (node) {
        node.resetFields()
      }
    },
    refresh() {
      this.searchFunc(this.search)
    }
  }
}
</script>
